<template>
  <Layout>
    <section class="p-5 bg-white mb-5">
      <el-select
        v-model="query.companyName"
        style="margin-right: 10px"
        clearable
        filterable
        remote
        reserve-keyword
        placeholder="请输入企业名称"
        :remote-method="queryCompanyInfo"
        @change="handleChangeCompany"
      >
        <el-option
          v-for="item in companyOpts"
          :key="item.corpId"
          :label="item.qdCompanyName"
          :value="item.corpId"
        />
      </el-select>
      <el-select
        v-model="query.employeeId"
        style="margin-right: 10px"
        clearable
        filterable
        placeholder="请选择账号"
      >
        <el-option
          v-for="(item, index) in accountList"
          :key="index"
          :label="item.employeeName"
          :value="item.employeeId"
        />
      </el-select>
      <span style="margin-right: 10px">支付时间：</span>
      <el-date-picker
        v-model="searchTime"
        style="margin-right: 10px"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <span style="margin-right: 10px">支付状态：</span>
      <el-select
        v-model="query.payStatus"
        style="margin-right: 10px"
      >
        <el-option
          v-for="(item) in payStatusData"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        />
      </el-select>
      <el-button @click="handleQuery(false)">
        查询
      </el-button>
    </section>
    <section>
      <el-table
        :data="tableData"
        border
      >
        <el-table-column
          label="企业名称"
          prop="compayName"
          show-overflow-tooltip
        />
        <el-table-column
          label="账号"
          prop="account"
          show-overflow-tooltip
        />
        <el-table-column
          label="支付时间"
          prop="payTime"
          show-overflow-tooltip
        />
        <el-table-column
          label="支付金额"
          prop="amount"
          show-overflow-tooltip
        />
        <el-table-column
          label="支付状态"
          prop="payStatus"
          show-overflow-tooltip
        />
        <el-table-column
          label="流水号"
          prop="orderNum"
          show-overflow-tooltip
        />
        <el-table-column
          label="购买单数"
          prop="payNum"
          show-overflow-tooltip
        />
        <el-table-column
          label="支付方式"
          prop="payWay"
          show-overflow-tooltip
        />
      </el-table>
      <div class="text-center py-4">
        <el-pagination
          v-model:current-page="query.num"
          background
          :total="total"
          @current-change="handleQuery(true)"
        />
      </div>
    </section>
  </Layout>
</template>

<script>
import Layout from '@/layout/index.vue'
import { mapGetters } from 'vuex'
export default {
    components: { Layout },
    props: {},
    data() {
        return {
            query: {
                num: 1,
                size: 10,
                companyName: '',
                employeeId: '',
                payStatus: 1
            },
            payStatusData: [
                {
                    key: 0,
                    value: '待支付'
                },
                {
                    key: 1,
                    value: '支付成功'
                },
                {
                    key: 2,
                    value: '超时关闭'
                },
                {
                    key: 3,
                    value: '交易失败'
                },
                {
                    key: 4,
                    value: '交易关闭'
                }
            ],
            total: 0,
            tableData: [],
            companyOpts: [],
            companyName: '',
            accountList: [],
            searchTime: []
        }
    },
    watch: {},
    computed: {
        ...mapGetters({
            data: 'records/data'
        })
    },
    created() {},
    mounted() {
        this.handleQuery()
        this.queryCompanyInfo()
    // this.queryAccount()
    },
    methods: {
        async handleQuery(flag = false) {
            if (!flag) {
                this.query.num = 1
            }
            if (!this.searchTime) {
                this.searchTime = []
            }
            let res = await this.$store.dispatch('records/queryPayRecord', {
                startCreateTime: this.searchTime[0] ?? '',
                endCreateTime: this.searchTime[1] ?? '',
                ...this.query,
                account: this.query.employeeId
            })
            this.total = res.data.total
            this.tableData = res.data.records
        },
        async queryCompanyInfo(val) {
            let res = await this.$store.dispatch('records/companyInfo', {
                qdCompanyName: val
            })
            this.companyOpts = res.data.data
        },
        handleChangeCompany() {
            this.query.employeeId = ''
            this.accountList = []
            if (this.query.corpId) this.queryAccount()
        },
        async queryAccount() {
            let res = await this.$store.dispatch('records/account', {
                corpId: this.query.companyName
            })
            this.accountList = res.data.data
        }
    }
}
</script>
<style lang="scss" scoped></style>
